<template>
  <div class="containAll">
  <loginHeader></loginHeader>
  <div class="loginMain positionRelative">
    <div class="mainContent">
        <el-row class="contentTitle">
            <el-col :span="20">欢迎注册</el-col>
            <el-col :span="4" class="toLogin" @click.native="toLogin">已有账号，<el-button type="text">快速登陆</el-button></el-col>
        </el-row>
        <el-form ref="formData" :model="formData" :rules="rules">
            <el-row>
                <el-col :span="9" :offset="7" class="marginTop20">
                     <el-form-item label="" prop="username">
                        <el-input placeholder="请输入用户名" type="text" v-model="formData.username" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="7">
                     <el-form-item label="" prop="password">
                        <el-input placeholder="请输入密码" type="password" v-model="formData.password" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="7">
                     <el-form-item label="" prop="comfirmPass">
                        <el-input placeholder="请确认密码" type="password" v-model="formData.comfirmPass" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="7">
                    <el-form-item label="" prop="phone">
                        <el-input placeholder="请输入手机号码" v-model.number="formData.phone" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="7">
                    <el-form-item label="" prop="code">
                        <el-row :gutter="20">
                            <el-col :span="16">
                                <el-input placeholder="请输入验证码" v-model.number="formData.code" clearable></el-input>
                            </el-col>
                            <el-col :span="8">
                                <el-button class="width100">获取验证码</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="7">
                    <el-form-item label="" prop="agreed">
                         <el-checkbox v-model="formData.agreed">注册即表示您已同意《能源商城用户协议》</el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="7">
                    <el-form-item label="">
                         <el-button class="width100" type="success" @click="submitForm('formData')">同意并注册</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
  </div>
  <footers></footers>
  </div>
</template>
</template>
<script type="text/javascript" layout="full" meta="{auth:true}">
import Footers from '../../../layout/default/components/footer/footer'
import LoginHeader from '../../../layout/default/components/header/loginHead'
import {mapActions} from 'vuex'
import {SET_USER_INFO} from 'src/store/actions/type'
import {homePage} from 'src/common/setting'
import { setTimeout } from 'timers';
export default {
  name: 'Register',
  data () {
    //检查勾选
    var checkAgreed = (rule, value, callback) => {
    if (value == false) {
        callback(new Error('请勾选同意条款'));
        return false
    }
    callback();
    };
      //检查姓名
    var checkUsername = (rule, value, callback) => {
    if (value == '') {
        callback(new Error('请输入用户名'));
    }
    callback();
    };
      //密码
        var checkPassword = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入密码'));
        } else {
            if (this.formData.comfirmPass !== '') {
            this.$refs.formData.validateField('comfirmPass');
            }
            callback();
        }
        };
      //确认密码
        var checkComfirmPass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.password) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
        };
      //手机号码
      var checkPhone = (rule, value, callback) => {
        let phoneReg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (value === '') {
            callback(new Error('请输入手机号码'));
        }else  if (phoneReg.test(value)) {
          callback()
        } else {
          callback(new Error('电话号码格式不正确'))
        }
    };
    return {
        formData: {
        agreed:false,
        username: '',
        password: '',
        comfirmPass:'',
        phone:'',
        code:'',
        checked:false,
      },
      rules: {
        username: [{trigger: 'blur',validator: checkUsername}],
        password: [{trigger: 'blur',validator: checkPassword}],
        comfirmPass: [{trigger: 'blur',validator: checkComfirmPass}],
        phone: [{trigger: 'blur',validator: checkPhone}],
        agreed: [{trigger: 'blur',validator: checkAgreed}],
      },
    //   submitLoad: false
    }
  },
  components:{
      LoginHeader,
      Footers
  },
  methods:{
    submitForm(formData) {
        this.$refs[formData].validate((valid) => {
            if (valid) {
              var dataObj = {
                name:this.formData.username,
                password:this.formData.password,
                confirmPassword:this.formData.comfirmPass,
                phone:JSON.stringify( this.formData.phone ),
                validCode:'123'
              }
              this.registerTest(dataObj)
          } else {
            return false;
          }
        });
      },
    async registerTest(dataObj) {
      const { $confirm, $api, $message, $router, setUserInfo } = this;
      try {
        const data = await $api.user.register(dataObj);
        console.log(data);
        if(data.code==0){
          const h = this.$createElement;
          this.$notify({
            title: '消息提示',
            message: h('i', { style: 'color: #67C23A'},data.data )
          });
          setTimeout(() => {
            this.$router.push({ name: 'UserLogin' })
          },3000);
        }
      } catch ({ msg }) {
        const h = this.$createElement;
        this.$notify({
          title: '消息提示',
          message: h('i', { style: 'color: #ff0000'},msg )
        });
      }
    },
    //点击跳转忘记密码
    toForgetPass(){
      this.$router.push({ name: 'ForgetPass' })
    },
    //点击跳转登录
    toLogin(){
        this.$router.push({ name: 'UserLogin' })
    }
  }
}
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
.toLogin{
    font-size: 14px;
    text-align: right;
    line-height: 50px;
}
.fontSize18{
  font-size: 18px;
  cursor: pointer;
}
.marginTop33{
    margin-top: 33px;
}
.width100{
    width: 100%;
}
.marginTop20{
    margin-top: 20px;
}
.positionRelative{
    position: relative;
}
.mainContent{
    width:1037px;
    height:565px;
    opacity:0.95;
    position: absolute;
    background: #ffffff;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 20px;
}
.loginMain{
  width: 100%;
  height: 745px;
  background: url('../../../assets/images/forgetPassBg.png');
  border-bottom: 1px solid #0000;
}
.contentTitle{
    font-size:24px;
    font-family:SourceHanSansCN-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:17px;
    border-bottom: 1px solid #cccccc;
    line-height: 60px;
}
</style>
